<template>
    <div class="index">
        <div class="detail">
            <h2>供应商详情</h2>


            <div class="tab">
                <el-descriptions title="" :column="3" :border='true' class="tab" :contentStyle="CS">
                    <el-descriptions-item label="客户名称">{{result.name }}</el-descriptions-item>
                    <el-descriptions-item label="客户编码">{{ result.customerCode }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="展示名称">{{ result.displayName }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="日期">{{ result.date }}</el-descriptions-item> -->
                    <el-descriptions-item label="税务登记证号码">{{ result.vat }}</el-descriptions-item>
                    <el-descriptions-item label="官网地址">{{ result.website }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="摘要">{{ result.comment }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="信用额度">{{ result.creditLimit }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="Active">{{ result.active }}</el-descriptions-item> -->
                    <el-descriptions-item label="是否为客户">{{ result.customer==='t'?'是':'否'  }}</el-descriptions-item>
                    <el-descriptions-item label="是否为供应商">{{ result.supplier==='t'?'是':'否'  }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="为否为雇员">{{ result.employee  }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="Address Type">{{ result.type }}</el-descriptions-item> -->
                    
                    <el-descriptions-item label="城市">{{ result.city }}</el-descriptions-item>
                    <el-descriptions-item label="所属区">{{ result.zip }}</el-descriptions-item>
                    <el-descriptions-item label="街道">{{ result.street }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="State">{{ result.stateId }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="国家id">{{ result.countryId }}</el-descriptions-item> -->
                    <el-descriptions-item label="电子邮箱">{{ result.email }}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{ result.phone }}</el-descriptions-item>
                    <el-descriptions-item label="移动电话">{{ result.mobile }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="公司/个人">{{ result.isCompany  }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="Share Partner">{{ result.partnerShare }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="Commercial Entity">{{ result.commercialPartnerId }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="Company Name Entity">{{ result.commercialCompanyName }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="创建者">{{ result.writeUid }}</el-descriptions-item> -->
                    <!-- <el-descriptions-item label="记录日期">{{ result.writeDate }}</el-descriptions-item> -->
                  
                    <el-descriptions-item label="交货地址">{{ result.deliveryAddress }}</el-descriptions-item>
                    <el-descriptions-item label="银行名称">{{ result2.bankName }}</el-descriptions-item>
                    <el-descriptions-item label="银行账户">{{ result2.accNumber }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="最后更新日期">{{ result2.writeDate }}</el-descriptions-item> -->
                </el-descriptions>
            </div>
            <div class="tab">
                <div class="btn">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="AddContacts" :disabled="flag">新增联系人</el-button>
                </div>
                <el-form :model="tableForm" ref="tableForm" >
                <el-table :data="tableForm.tableData" style="width: 90%; margin: 5px auto 30px;" border
                :header-cell-style="{'text-align':'center' }" :row-class-name="rowSysGoodsIndex"
             :cell-style="{'text-align':'center'}">
             <el-table-column prop="sequence" label="序号">
                    </el-table-column>
                    <el-table-column prop="name" label="联系人名称">
                        <template slot-scope="scope">
                            <el-form-item :prop=" 'tableData.' + scope.$index + '.name' " :rules="rules.name">
                                    <el-input class="thRed" v-model="scope.row.name" />
                                </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column prop="email" label="电子邮箱">
                        <template slot-scope="scope">
                            <el-form-item :prop=" 'tableData.' + scope.$index + '.email' " :rules="rules.email">
                                    <el-input class="thRed" v-model="scope.row.email" />
                                </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="联系电话">
                        <template slot-scope="scope">
                            <el-form-item :prop=" 'tableData.' + scope.$index + '.phone' " :rules="rules.phone">
                                    <el-input class="thRed" v-model="scope.row.phone" />
                                </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="移动电话">
                        <template slot-scope="scope">
                            <el-form-item :prop=" 'tableData.' + scope.$index + '.mobile' " :rules="rules.mobile">
                                    <el-input class="thRed" v-model="scope.row.mobile" />
                                </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column prop="deliveryAddress" label="邮寄地址">
                        <template slot-scope="scope">
                            <el-form-item :prop=" 'tableData.' + scope.$index + '.deliveryAddress' " :rules="rules.deliveryAddress">
                                    <el-input class="thRed" v-model="scope.row.deliveryAddress" />
                                </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                           <!--  <el-button size="mini" type="text" icon="el-icon-edit" @click="ContactsUpdate(scope.row)"
                                v-hasPermi="['system:stock:edit']">修改</el-button> -->
                                <el-button size="mini" type="text" icon="el-icon-success" @click="ContactsSub(scope.row)"
                               >确认</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="ContactsDel(scope.row)"
                                >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </el-form>
            </div>
        </div>
         <!-- 联系人新增弹框 -->
         <el-dialog :title="title" :visible.sync="Contactsrow" width="800px" append-to-body>
            <el-form ref="form1" :model="form1" :rules="rules" label-width="150px">
                <el-form-item label="联系人姓名" prop="name">
                    <el-input v-model="form1.name" placeholder="请输入联系人姓名" />
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                    <el-input v-model="form1.email" placeholder="请输入电子邮箱" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="form1.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="移动电话" prop="mobile">
                    <el-input v-model="form1.mobile" placeholder="请输入移动电话"></el-input>
                </el-form-item>
                <el-form-item label="邮寄地址" prop="deliveryAddress">
                    <el-input v-model="form1.deliveryAddress" placeholder="请输入邮寄地址" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="ContactsAddSub">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 联系人编辑弹框 -->
        <el-dialog :title="title" :visible.sync="Contactsedit" width="800px" append-to-body>
            <el-form ref="form2" :model="form2" :rules="rules" label-width="150px">
                <el-form-item label="联系人姓名" prop="name">
                    <el-input v-model="form2.name" placeholder="请输入联系人姓名" />
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                    <el-input v-model="form2.email" placeholder="请输入电子邮箱" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="form2.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="移动电话" prop="mobile">
                    <el-input v-model="form2.mobile" placeholder="请输入移动电话"></el-input>
                </el-form-item>
                <el-form-item label="邮寄地址" prop="deliveryAddress">
                    <el-input v-model="form2.deliveryAddress" placeholder="请输入邮寄地址" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editsubBomForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getdetail, addPartner, getPartner, updatePartner, delPartner } from "@/api/system/partner";

export default {
    props: {
        fid:{
            type:Number,default:null
}
    }
        
    ,
    data() {
        return {
              // 新增订单行按钮禁用
              flag: false,
             // 列表描述单元格的样式
             CS: {
                //   'text-align': 'center',  //文本居中
                'max-width': '280px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            result: {},
            result2: {},
            // 新增联系人弹框
            Contactsrow: false,
            // 修改联系人弹框
            Contactsedit: false,
            // 新增联系人参数
            form1: {},
            // 修改联系人参数
            form2: {},
            // 联系人表格
            tableForm:{
                tableData: []
            },
            // 弹框标题
            title: '',
            // 新增修改弹框验证
            rules: {},
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.fid||this.$route.query.listId;
        //this.tableForm.tableData = this.$route.query.manageList;
        this.getList(id);
    },
    methods: {
         /** 商品序号 */
         rowSysGoodsIndex({ row, rowIndex }) {
            row.sequence = rowIndex + 1;
        },
        getList(id) {
            // console.log(this.fid);
            getdetail(id).then(res => {
                // console.log(res);
                this.result = res.data[0]
                this.result2 = res.data[1]
               this.tableForm.tableData = res.data[0].contacts

                // console.log(this.result);
                // console.log(this.result2);

            })
        },
       // 新增弹框
        AddContacts() {
            this.flag=true
            // this.Contactsrow = true
            // this.reset()
            let obj = {};
            obj.name = "";
            obj.email = "";
            obj.phone = "";
            obj.mobile = "";
            obj.deliveryAddress = "";
            
            // console.log(this.tableForm.tableData);
            if (this.tableForm.tableData === null) {
                this.tableForm.tableData = []
            }
            this.tableForm.tableData.push(obj);
        },
        // 行确认
        ContactsSub(row) {
            // console.log(this.tableForm.tableData);
            // this.$refs["tableForm"].validate((valid) => {
            //     console.log(valid);
            //     if (valid) {
                    const id = row.sequence - 1
                    const contactsid = this.$route.query.listId
            row.parentId = this.$route.query.listId
            // console.log(row);
            
                    addPartner(row).then(res => {
                        // console.log(res);
                        this.getList(contactsid);
            

                    })
                    this.flag=false
            //     }
            // })
        },
        // 清空联系人参数
        reset() {
            this.form1 = {
                name: null,
                email: null,
                phone: null,
                mobile: null,
                deliceryAddress: null,
            }
        },
        // 修改联系人
        ContactsUpdate(row) {
            // console.log(row);
            const id = row.id
            this.Contactsedit = true
            getPartner(id).then(res => {
                // console.log(res);
                this.title = '修改联系人'
                this.form2 = res.data

            })
        },
        // 修改联系人提交
        editsubBomForm() {
            let id = this.$route.query.listId;


            // console.log(this.form2);
            updatePartner(this.form2).then(res => {
                // console.log(res);
                // this.mrpBomParts=res.data.mrpBomParts
                // this.form = res.data
                //this.tableForm.tableData = res.data.mrpBomParts
                this.Contactsedit = false

            })
            this.getList(id);
        },
        // 新增确定
        ContactsAddSub() {
            const contactsid = this.$route.query.listId
            this.form1.parentId = this.$route.query.listId
            // console.log(this.form1)
            const que = this.form1
            const that = this
            this.$modal.confirm('是否确认新增联系人？').then(function () {
                return addPartner(que).then(res => {
                    // console.log(res);
                    that.Contactsrow = false
                })
            }).then(() => {
                this.getList(contactsid);
                this.$modal.msgSuccess("新增成功");
            }).catch((err) => {
                // console.log(err);
            });

        },
        // 取消按钮
        cancel() {
            this.Contactsrow = false;
            this.Contactsedit = false;
            // this.Bomadd = false;
            //   this.reset();
        },
        // 联系人删除
        ContactsDel(row) {
            const contactsid = this.$route.query.listId
            // console.log(row);
            const id = row.id
            const that=this
            this.$modal.confirm('是否确认删除联系人为"' + row.name + '"的数据项？').then(function () {
                return that.getdelPartner(id)
            }).then(() => {
                this.getList(contactsid);
                this.$modal.msgSuccess("删除成功");
            }).catch((err) => {
                // console.log(err);
            });

        },
        getdelPartner(id) {
            if (this.flag === true) {
                this.tableForm.tableData.pop()
                this.flag = false

            } else {
                delPartner1(id).then(res => {

                    // console.log(res);
                })
            }
        }
    },
    components: {},
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
// @import "~@/assets/styles/detail.scss";
.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}
.thRed {
    // height: 200px;
    margin-top: 22px;
}
.btn {
    margin-left: 5%;
}
.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 90%;

    .tab {
        width: 90%;
        margin: 20px auto;
    }

}

h2 {
    text-align: center;
}
.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

// .detail {
//     margin: 30px auto;
//     width: 80%;
//     .tab {
//         width: 80%;
//         margin: 20px auto;
//     }

// }

// .my-content {
//     background: #1f1e1e;
// }


// ::v-deep .el-descriptions-item__label.is-bordered-label {
//     font-weight: bold;
//     color: #6d6a6a;
//     background: #fdfcfc;
// }
</style>